<template>
	<view class="orders">
		<!-- #ifndef H5 -->
		<topTitle :styles="{back:false,title:'订单列表',color:'#fff'}" />
		<!-- #endif -->
		<view class="top_search">
			<view class="search_input">
				<input type="text" v-model="searchCondition" placeholder="输入商品名称/订单号">
			</view>
			<view class="search_button" @click="searchOrders">
				<image src="/static/images/search.png" mode=""></image>
			</view>
		</view>
		<view class="tab_list">
			<view v-for="(item,index) in tabList" :key="index" @click="changeChex(index)">
				<text :class="[{active:item.chex}]">{{item.title}}</text>
			</view>
		</view>
		<scroll-view v-show="orderList.length > 0" class="orders_list" scroll-y="true" > 
			<view>
				<view class="order_list_item" v-for="(item,index) in orderList" :key="index" @click="goOrderDetail(item.id)">
					<view class="bgcolor">
						<view class="left">
							<text></text>
							{{item.status_text}}
						</view>
						<view class="right" v-if="item.technician_info">
							服务技师：{{item.technician_info.name}}
							<image src="/static/images/orders/fork.png" mode="" @click.stop="remove(item)"></image>
						</view>
					</view>
					<view class="list_top" >
						<view class="title"> 
							<view v-for="(data,_index) in item.order_info" :key="_index">
								<view class="">{{data.product_info.name}} <text>X {{data.product_info.num}}</text> </view>
							</view>
						</view>
						<!-- <view class="js_name"><font>服务技师：</font>{{item.technician_info.name}}</view> -->
					</view>
					<view class="list_main">
						<view class="service_time"><font>服务时间：</font>{{item.service_time}}</view>
						<view class="order_price">￥<font>{{item.pay_price}}</font></view>
					</view>
					<view class="order_no">
						<view class="">
							订单编号：{{item.order_no}}
						</view>
					</view>
					<view class="list_bottom">
						<view class="order_button">
							<view class="" v-if="item.user_cancel==0 && item.status != -1 && item.status < 6" @click.stop="cancel(item.id)">取消订单</view>
							<view class="pay" v-if="item.user_cancel == 0 && item.status == 0" @click.stop="once(item)">立即支付</view>
							<!-- <view class="" v-if="item.status >= 2 && item.status<4"  @click="contact(item)">联系技师</view> -->
							<view class="" v-if="item.user_cancel==1 || item.status == -1"  @click.stop="aginPay(item)">再次购买</view>
							<view class="" v-if="item.status == 6" @click.stop="goEvaluate(item)">立即评价</view>
							<view class="" v-if="item.status == -3" @click.stop="aginPay(item)">重新购买</view>
						</view>
						
						<!-- <view class="order_button" v-if="item.status == 0">
							<view class="" v-if="item.user_cancel==0" @click="cancel(item.id)">取消订单</view>
							<view class="pay" v-if="item.user_cancel == 0" @click="once(item)">立即支付</view>
						</view>
						<view class="order_button" v-if="item.status == 6">
							<view class="" @click="aginPay(item)">再次购买</view>
							<view class="" @click="goEvaluate(item)">立即评价</view>
						</view>
						<view class="order_button" v-if="item.status >= 1&&item.status <= 3">
							<view class="" v-if="item.user_cancel==0" @click="cancel(item.id)">取消订单</view>
							<view class="" v-if="item.status >= 2 && item.status<4"  @click="contact(item)">联系技师</view>
						</view>
						<view class="order_button" v-if="item.status == -3">
							<view class="" @click="aginPay(item)">重新购买</view>
						</view> -->
					</view>
					<view class="payy" v-if="pay">
						<!-- 遮罩层 -->
						<view class="top_seat" @click.stop="nopay"></view>
						<view class="content">
							<view class="head">
								<view class="money">
									请支付<text>￥{{payOrder.pay_price}}</text>
								</view>
								<view class="cancel" @click.stop="nopay">
									取消
								</view>
							</view>
							<view class="payList">
								<view class="list" @click.stop="paySubmit('yue')">
									<image src="https://oos.kmey.cn/21/23fc82d867562ab979a08dee28e20b.png" mode=""></image>
									<text>账户余额</text>
								</view>
								<view class="list" @click.stop="paySubmit('wxpay')">
									<image src="https://oos.kmey.cn/50/226d0a7918294ab838621ac05186cc.png" mode=""></image>
									<text>微信支付</text>
								</view>
								<view class="list" @click.stop="paySubmit('alipay')">
									<image src="/static/images/orders/alipay.png" mode=""></image>
									<text>支付宝</text>
								</view>
							</view>
						</view>
					</view>
				</view>
			</view>
		</scroll-view>
		<view v-show="orderList.length == 0" class="orders_listto">
			<image src="/static/images/orders/not.png" mode=""></image>
			<view class="">
				暂无数据 ~
			</view> 
		</view>
		<fui-dialog :show="show" :content="content" maskClosable @click="onCancel" @close="onClose"></fui-dialog>
	</view>
</template>

<script>
	// #ifdef H5
	import wx from "weixin-js-sdk"
	// #endif
	import topTitle from "@/components/topTitle.vue"
	export default {
		components:{
			topTitle
		},
		data() {
			return {
				page:1,
				limit:10,
				pay:false,
				searchCondition:'',
				tabList:[
					{title:'全部',chex:true,status:""},
					{title:'进行中',chex:false,status:"processing"},
					{title:'待补单',chex:false,status:"charging"},
					{title:'已完成',chex:false,status:"completed"},
					{title:'已评价',chex:false,status:"evaluated"},
					{title:'已取消',chex:false,status:"canceled"},
				],
				orderList:[],
				status:'', //0 待支付  1 待发货 2 待收货 3 待评价 4 已完成 -1 已取消  全部（空值）
				payOrder:{},
				technician_info:{},
				show:false,
				content:''
			};
		},
		onShow() {
			if(!uni.getStorageSync('token')){
				uni.showToast({
					title:'未登录',
					icon:"none"
				})
				// #ifdef H5
				if(navigator.userAgent.toLowerCase().indexOf('micromessenger') !== -1){
					setTimeout(()=>{
						uni.navigateTo({
							url:'/pages/login/index'
						})
					},1000)
				}else{
					let url = ''
					if(this.phone_login){
						url = '/pages/login/login'
					}else{
						url = '/pages/login/index'
					}
					setTimeout(() => {
						uni.navigateTo({
							url:url
						})
					}, 1000)
				}
				// #endif
				// #ifdef APP-PLUS
				setTimeout(()=>{
					uni.navigateTo({
						url:'/pages/login/login'
					})
				},1000)
				// #endif
			}
			this.orderList = []
			this.getOrderList()
			// this.orderList = []
			// this.getOrderList()
			this.pay = false
		},
		onLoad(){
			
			this.getForce()
		},
		methods:{
			//强制登录配置
			getForce(){
				this.$http({
					url:'/api/config',
					method:'get',
					success:result=>{
						console.log(result,'------------------------getForce')
						this.force_login = result.data.force_login
						this.phone_login = result.data.phone_login
					}
				})
			},
			//取消订单
			cancel(id) {
				this.$http({
					url:`/api/product/order/cancel_tips/${id}`,
					method:'post',
					success:result=>{
						console.log(result,'--------------------------------取消订单')
						if(result.data.info.tips == ''){
							//已开始
							uni.navigateTo({
								url:'/pages/orders/cancelOrder/cancelOrder?id='+id
							})
						}else{
							this.content= result.data.info.tips
							this.chexedId =id
							this.show = true;
						}
					}
				})
				return false;
			},
			onCancel(e){
				if(e.index == 1){
					this.show = false;
					//已开始
					uni.navigateTo({
						url:'/pages/orders/cancelOrder/cancelOrder?id='+this.chexedId
					})
				}else{
					this.onClose()
				}
			},
			onClose(){
				this.show = false;
			},
			//支付
			paySubmit(type){
				let that = this;
				let params = {
					order_no:this.payOrder.order_no,
					attach:'product',
					pay_type:type,
					from:this.$from()
				}
				uni.showLoading({
					title:'支付中...',
				})
				this.$http({
					// url:`/api/product/order/pay/${this.payOrder.id}`,
					url:`/api/v2/pay_order`, 
					method:'post',
					data:params,
					success:result=>{ 
						console.log(result,'-----------------123')
						if(result.code == 200){
							if(result.data.info.js_config){
								let data = result.data.info.js_config
								// #ifdef H5
								wx.config({
									debug: false, // 开启调试模式,调用的所有api的返回值会在客户端alert出来，若要查看传入的参数，可以在pc端打开，参数信息会通过log打出，仅在pc端时才会打印。
									appId:data.appId, // 必填，公众号的唯一标识
									timestamp:data.timestamp , // 支付签名时间戳，注意微信 jssdk 中的所有使用 timestamp 字段均为小写。但最新版的支付后台生成签名使用的 timeStamp 字段名需大写其中的 S 字符
									nonceStr: data.nonceStr, // 支付签名随机串，不长于 32 位
									signType:data.signType, // 微信支付V3的传入 RSA ,微信支付V2的传入格式与V2统一下单的签名格式保持一致
									jsApiList: ['invoke'] // 必填，需要使用的JS接口列表，所有JS接口列表见附录2
								});
								wx.invoke(
									'getBrandWCPayRequest', {
										"appId": data.appId, //公众号ID，由商户传入     
										"timeStamp": data.timeStamp, //时间戳，自1970年以来的秒数     
										"nonceStr": data.nonceStr, //随机串     
										"package": data.package,
										"signType": data.signType, //微信签名方式：     
										"paySign": data.paySign, //微信签名 
									}
								)
								// #endif
							}else if(result.data.info.scheme_url){
								let url = result.data.info.scheme_url;
								// #ifdef H5
								if (uni.getSystemInfoSync().platform =='android') { //android终端
									window.open(url);
								} else if (uni.getSystemInfoSync().platform == "ios") { //ios终端
									window.location.href = url;
								}
								// #endif
								// #ifdef APP-PLUS
								plus.runtime.openURL(encodeURI(url), err => {
									console.log(err)
								})
								// #endif
							}else{
								uni.showToast({
									title:'支付成功',
									// icon:"none"
								})
								setTimeout(()=>{
									uni.reLaunch({
										url:'/pages/orders/index'
									})
								},1500)
							}
						}else{
							uni.showToast({
								title:result.msg,
								icon:"none"
							})
							return false;
						}
					}
				})
			},
			once(e){
				console.log(e)
				this.pay = true
				this.payOrder = e
			},
			nopay(){
				this.pay = false
			},
			//联系技师
			contact(e){
				uni.makePhoneCall({
					phoneNumber:e.technician_info.phone
				})
			},
			//搜索订单
			searchOrders(){
				if(this.searchCondition == ''){
					uni.showToast({
						title:'请输入搜索条件',
						icon:"none"
					})
				}
				console.log(this.searchCondition)
			},
			//tab状态切换
			changeChex(i){
				this.tabList.forEach((item,index)=>{
					item.chex = false;
					if(index == i){
						item.chex = true;
					}
				})
				this.status = this.tabList[i].status
				this.orderList = []
				this.page = 1
				this.getOrderList()
			},
			//订单详情
			goOrderDetail(id){
				uni.navigateTo({
					url:`./orderDetail/orderDetail?id=${id}`
				})
			},
			getOrderList(type){
				this.$http({
					url:'/api/product/order/list',
					method:'get',
					data:{
						page:this.page,
						limit:this.limit,
						status:this.status,
						keywords:'',
					},
					success:result=>{
						console.log(result,'-----------------123')
						if(this.orderList.length == 0){
							this.orderList = result.data.list
						}else{
							this.orderList =  this.orderList.concat(result.data.list)
						}
						if(type){
							this.orderList = result.data.list
							uni.showToast({
								title:'刷新成功'
							})
							uni.stopPullDownRefresh()
						}
						this.$forceUpdate()
					}
				})
			},
			getTechInfo(id){
				this.$http({
					url:`/api/technician/info/${id}`,
					method:'',
					success:result=>{
						console.log(result)
						this.technician_info = result.data.info
					}
				})
			},
			//再次购买
			aginPay(object){
				this.getTechInfo(object.technician_id)
				console.log(object,'-----------------object')
				setTimeout(()=>{
					let arr = object.order_info;
					let products = [];
					arr.forEach((item,index)=>{
						this.$http({
							url:`/api/product/info/${item.product_id}`,
							method:'get',
							success:result=>{
								console.log(result,'-----------------123')
							}
						})
						products.push({
							product_id:item.product_id,
							num:item.num
						})
					})
					let data = {
						products,
						technician_id:object.technician_id
					}
					let orderDetail = {
						data,
						technician:this.technician_info,
						project:arr
					}
					console.log(orderDetail,'---------------123123123')
					// return false;
					uni.setStorageSync('orderDetail',JSON.stringify(orderDetail))
					uni.navigateTo({
						url:`/pages/orders/orderPay/orderPay`
					})
				}, 1000);
				// uni.switchTab({
				// 	url:'/pages/index/index'
				// })
			},
			goEvaluate(e){
				console.log(e,'..........................111')
				let evaluateData = {
					orderId:e.id,
					technician:e.technician_info
				}
				uni.setStorageSync('evaluateData',JSON.stringify(evaluateData))
				uni.navigateTo({
					url:`/pages/orders/evaluate/evaluate`
				})
			},
			remove(e){
				let that = this;
				uni.showModal({
					title:'提示',
					confirmText:'删除订单',
					content:'是否删除订单 服务时间：'+ e.service_time +' 服务技师：'+ e.technician_info.name +'',
					success: (res) => {
						if(res.confirm){
							this.$http({
								url:`/api/product/order/delete/${e.id}`,
								method:'post',
								success:result=>{
									uni.showToast({
										title:result.msg
									})
									this.orderList = [];
									that.getOrderList()
								}
							})
						}
					}
				})
			}
		},
		onReachBottom(){
			this.page++
			this.getOrderList()
		},
		onPullDownRefresh() {
			uni.showLoading({
				title:'刷新中...'
			})
			this.listPage = 1;
			this.getOrderList('down')
		},
		// onTabItemTap() {
		// 	this.orderList = []
		// 	this.page  = 1
		// 	this.getOrderList()
		// },
		
	}
</script>

<style lang="scss" scoped>
	page{
		width: 100%;
		height: 100%;
		background: #eee;
	}
	.orders{
		width: 100%;
		height: 100%;
		display: flex;
		flex-direction: column;
		.top_search{
			height: 80px;
			background: #3AE890;
			display: flex;
			justify-content: center;
			align-items: center;
			margin-top: -10px;
			.search_input{
				width: 320px;
				height: 40px;
				line-height: 40px;
				border-radius: 21px;
				background: #fff;
				padding-left: 5px;
				text-indent: 5px;
				input{
					width: 100%;
					height: 40px;
				}
			}
			.search_button{
				margin-left: 12px;
				width: 28px;
				height: 28px;
				image{
					width: 100%;
					height: 100%;
				}
			}
		}
		.tab_list{
			width: 100%;
			height: 50px;
			border-radius: 16px;
			background: #fff;
			display: flex;
			justify-content: space-around;
			align-items: center;
			margin-top: 00px;
			padding: 0 10rpx;
			box-sizing: border-box;
			view{
				// padding: 0 10px;
				width: 16%;
				text-align: center;
				text{
					padding: 8px 0;
					opacity: 0.5;
				}
				
			}
		}
		.orders_list{
			flex: 1;
			background: #eee;
			padding-bottom: 10px;
			overflow-y: auto;
			.order_list_item{
				width: 95%;
				margin:14px 10px;
				background-color: #fff;
				border-radius: 8px;
				display: flex;
				flex-direction: column;
				justify-content: space-around;
				font-size:12px;
				font-weight: 500;
				padding: 0 0 20rpx 0; 
				.bgcolor{
					background-color: #f2fff8;
					border-radius: 8px 8px 0 0 ;
					height: 30px;
					margin-bottom: 10px;
					.left{
						display: flex;
						align-items: center;
						font-weight: bold;
						color: #23c074;
						text{
							display: block;
							width: 8px;
							height: 8px;
							border-radius: 50%;
							background-color: #23c074;
							margin-right: 7px;
						}
					}
					.right{
						color: #23c074;
						display: flex;
						align-items: center;
						image{
							width: 15px;
							height: 15px;
							margin-left: 7px;
						}
					}
				}
				>view{
					display: flex;
					justify-content: space-between;
					align-items: center;
					padding: 3px 13px;
					box-sizing: border-box;
				}
				.list_top{
					.title{
						font-size: 17px;
						font-weight: bold;
						color: #2E2E2E;
						text{
							font-size: 12px;
							margin-left: 5px;
						}
					}
					.js_name{
						color: #7b7b7b;
					}
				}
				.list_main{
					.service_time{
						color: #7b7b7b;
					}
					.order_price{
						color: #fd5c5b;
						font-weight: bold;
						>font{
							font-size: 17px;
						}
					}
				}
				.list_bottom{
					justify-content: flex-end;
					.order_type{
						color: #1BCE6B;
					}
					.order_button{
						display: flex;
						justify-content: space-around;
						view{
							border: 1px solid #707070;
							color: #707070;
							font-weight: 500;
							margin: 0px 5px;
							padding: 2px 10px;
							border-radius: 7px;
						}
						.pay{
							background: #1BCE6B;
							color: #fff;
							border: none;
						}
					}
				}
				.payy{
					position: fixed;
					top: -20px;
					left: 0;
					padding: 0;
					bottom: 0;
					width: 100%;
					height: 100%;
					right: 0;
					flex-direction: column;
					.top_seat{
						flex: 1;
						background: rgba(0,0,0,0.1);
						opacity: 0.5;
						z-index: 100;
						width: 100%;
					}
					.content{
						background-color: #f7f7f7;
						padding: 40rpx;
						width: 100%;
						// height: 270px;
						box-sizing: border-box;
						.head{
							position: relative;
							.money{
								text-align: center;
								color: #9f9f9f;
								font-size: 26rpx;
								>text{
									font-size: 35rpx;
									color: #ff8936;
									font-weight: bold;
								}
							}
							.cancel{
								position: absolute;
								right: 30rpx;
								top: 0;
								color: #9f9f9f;
								font-size: 26rpx;
							}
						}
						.payList{
							padding: 40rpx 0;
							.list{
								display: flex;
								align-items: center;
								padding: 25rpx 30rpx;
								background-color: #fff;
								border-radius: 10rpx;
								margin-bottom: 30rpx;
								border: 1rpx solid #ffc948;
								&:last-child{
									border: 1rpx solid #24c373;
								}
								>image{
									width: 60rpx;
									height: 60rpx;
								}
								>text{
									font-size: 25rpx;
									font-weight: bold;
									margin-left: 12rpx;
								}
								
							}
							
						}
					}
				}
			}
		}
		.orders_listto{
			flex: 1;
			font-size: 14px;
			text-align: center;
			// background: #eee;
			color: #9e9e9e;
			>image{
				width: 200rpx;
				height: 200rpx;
				margin: 100rpx 0 40rpx 0;
			}
		}
	}
	.active{
		color: #2E2E2E;
		font-size: 16px;
		font-weight: bold;
		opacity: 1 !important;
		border-bottom: 5px solid #2EF1B5;
	}
</style>
